/* index.css */
.masterplate {
  padding: 20px;
  width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  
}

/* 模板类型切换 */
.template-types {
  display: flex;
  gap: 10px;
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.type-item {
  cursor: pointer;
  padding: 8px 15px;
  position: relative;
  transition: all 0.3s;
}

.type-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 3px;
  background: #000;
}

/* 筛选区块 */

// 新增 filters 容器样式
.filters {
  display: flex;
  gap: 40px; // 控制筛选区块间距
  flex-wrap: wrap; // 允许换行
}

// 修改 filter-section 样式
.filter-section {
  display: flex;         // 启用弹性布局
  align-items: center;   // 垂直居中对齐
  gap: 15px;            // 标题与选项间距
}

// 调整标题对齐
.filter-title {

    flex-shrink: 0;       // 防止标题被压缩
  margin-bottom: 0;     // 移除原底部间距
   font-weight: bold;
 
  color: #666;
}




.filter-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;  // 选项项垂直居中
}

.filter-item {
  cursor: pointer;
  padding: 6px 15px;
  border-radius: 15px;
 
 
  transition: all 0.2s;
}

.filter-item.selected {
  background: #ccc4;
}

// /* 更多/收起样式 */
// .filter-item:last-child {
//    background: #ccc4;
 
// }